<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东-欢迎登录</title>
<!--    <script src="../js/login.js"></script>-->
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<div class="header-x">
    <div class="header">
        <div class="header-left">
            <a href="https://jd.com" alt="" class="logo"></a>
            <div class="logo-title">欢迎登录</div>
        </div>
        <div class="header-right">
            <span></span><a href="javascript:;">登录页面，调查问卷</a>
        </div>
    </div>
</div>
<div class="content">
    <div class="tips-wrapper">
        <div class="tips-inner">
            <div class="con-wrapper">
                <i></i>
                <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
                    <a href="https://about.jd.com/privacy/" class="black" target="_blank">《 京东隐私政策 》</a>
                    已上线，将更有利于保护您的个人隐私 。
                </p>
            </div>
        </div>
    </div>
</div>
<div class="login-banner">
    <div class="login-bg">
        <div class="login-box">
            <div class="login-top">
                <i></i>
                <p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
            </div>
            <div class="login-tab">
                <ul class="list">
                    <li style="color: #f00;">扫码登录</li>
                    <li>账户登录</li>
                </ul>
                <div class="login-con">
                    <ul class="list-con">
                        <li>
                            <div class="saoma">

                                <img src="../assets/show.png" alt="">
                            </div>
                        </li>
                        <li style="display: none">
                            <div class="zhanghu">
                                <form action="">

                                    <div class="login-babel">
                                        <label for=""></label>
                                        <input type="text" placeholder="邮箱/用户名/登录手机">
                                    </div>
                                    <div class="login-item">
                                        <label for=""></label>
                                        <input type="password" name="" id="" onkeydown="handlerCode()" placeholder="密码">
                                    </div>
                                    <span style="display: block"><a href="https://aq.jd.com/process/findPwd?s=1">忘记密码</a></span>
                                    <div class="login-btn">
                                        <input type="button" onclick="handlerbtn()" value="登    录" style="outline: none; margin-top: 40px;font-size: 20px; background-color:#E4393C; color: #fff;border: 0">
                                    </div>
                                    <div class="reg">
                                        <span><i style="background:url(../assets/pwd-icons-new.png) no-repeat -104px -72px; width: 18px;height: 19px;display: inline-block"></i><a href="reg.html" style="font-size: 16px">立即注册</a></span>
                                    </div>
                                </form>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script>


    // login
    let list = document.querySelectorAll('.list li');
    let list_con = document.querySelectorAll('.list-con li');
    console.log(list_con)
    console.log(list)
    // 扫码登录    账户登录 切换
    list.forEach((v,i) => {
        v.onclick = () => {
            console.log(v)
            console.log(i)
            list.forEach((e) => {
                e.style.color = '#000'
                e.style.fontWeight = '400'
            })
            v.style.color = '#e20'
            v.style.fontWeight = '700'
            list_con.forEach((v,i) => {
                console.log(v)
                console.log(i)
                v.style.display = 'none'
                v.style.color = '#000'
            })
            list_con[i].style.display = 'block'

        }
    })

    // 账户登录 获取元素
    function handlerbtn() {
        console.log('123')
        let userName = document.querySelector('.login-babel input').value;
        let password = document.querySelector('.login-item input').value;
        console.log(userName)
        console.log(password)
        let params = {
            userName,
            password
        }
        axios.post('http://localhost:1337/api/v1/auth/login', params).then((resolve) => {
            console.log(resolve)
            let code = resolve.data.code;
            let data = resolve.data.data;
            if (code == 1) {
                alert('登录成功')
                location.href = 'index.html'
            } else {
                alert('用户名或密码错误')
                location.href = 'login.html'
            }

            localStorage.setItem('userName',userName);
            localStorage.setItem('data',data);

        }).catch((reject) => {
            console.log(reject)
        })
    }
    function handlerCode(e) {
        console.log('12345')
        let password = document.querySelector('.login-item input').value;
        console.log(password)
        if (e.keyCode == 13) {
            if (password != '') {
                handlerbtn()
            }
        }
    }
</script>
</body>
</html>